<script lang="ts" setup>
import { ref } from "vue";
import type { DrawerProps } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { getJobVoListApi } from "@/api/modules/sysjob/job";
import { filterEnum } from "@/utils";
import { OptEnum, sysEnum, activeEnum } from "@/biz/eenum/appEnum";
import { jobStatusType, FlagCompanyTypes } from "@/biz/datas/appData";
import JobDialog from "@/views/cpyjob/ft/components/JobDialog.vue";
import saveMsg from "../../utils/saveMsg.js";
import { MESSAGE_TYPE } from "@/IM/constant";

const drawer = ref(false);
const direction = ref<DrawerProps["direction"]>("rtl");
const chooseJob = () => {
  drawer.value = true;
};
/* 表格部分 */
const pTable = ref();
const columns: Partial<ColumnProps>[] = [
  {
    prop: "title",
    label: "标题",
    search: { el: "input" }
  },
  {
    prop: "status",
    label: "状态",
    width: 80
  },
  {
    prop: "pubDate",
    label: "发布时间",
    width: 180
  },
  {
    prop: "contactor",
    label: "联系人",
    width: 100
  },
  {
    prop: "contactPhone",
    label: "联系电话",
    width: 100
  },
  {
    prop: "typeName",
    label: "岗位类型",
    width: 100
  },
  {
    prop: "operation",
    width: 260,
    fixed: "right",
    label: "操作"
  }
];
const getTableList = params => {
  let newParams = JSON.parse(JSON.stringify(params));
  if (newParams.orderStatus) {
    if (newParams.status == "0") {
      newParams.status = "";
    }
  }
  return getJobVoListApi(newParams);
};
// 打开 dialog(新增、查看、编辑)
const jobDialogRef = ref();
const handleOpenDialog = async (optType: OptEnum, rowData?: { id: string }) => {
  let params = {
    optType,
    rowData: { ...rowData }
  };
  jobDialogRef.value.acceptParams(params);
};
const handleRefreshList = () => {
  pTable.value.getTableList();
};
const type = "job";
const sendVideoMessage = async id => {
  let customEvent = "customEvent";
  let customExts = {
    type: type,
    id: id
  };
  let options = {
    customEvent,
    customExts
  };
  saveMsg(options, MESSAGE_TYPE.CUSTOM);
  drawer.value = false;
};
const emits = defineEmits(["doInvite"]);
const doInvite = row => {
  emits("doInvite",row);
  drawer.value = false;
};
defineExpose({
  chooseJob
});
</script>

<template>
  <el-drawer v-model="drawer" title="全职岗位" :direction="direction" size="50%">
    <div class="tableContent">
      <ProTable ref="pTable" :columns="columns" :init-param="{ status: 1 }" :request-api="getTableList">
        <template #status="scope">
          <el-tag :type="scope.row.status === sysEnum.SIX ? 'danger' : ''" style="margin-left: 5px">
            {{ filterEnum(scope.row.status, jobStatusType) }}
          </el-tag>
        </template>
        <template #jobScore="scope">
          <el-rate v-model="scope.row.jobScore" disabled show-score text-color="#ff9900" score-template="{value}" />
        </template>
        <template #operation="scope">
          <el-button type="primary" text @click="handleOpenDialog(OptEnum.VIEW, scope.row)">详情</el-button>
          <el-button type="primary" text @click="sendVideoMessage(scope.row.id)">发送</el-button>
          <el-button type="primary" text @click="doInvite(scope.row)">邀请面试</el-button>
        </template>
      </ProTable>
    </div>
  </el-drawer>
  <JobDialog ref="jobDialogRef" @refresh-list="handleRefreshList" />
</template>

<style lang="scss" scoped>
.tableContent {
  height: calc(100% - 100px);
}
.order-box {
  // border: 1px solid red;
  display: flex;
  align-items: center;
  // justify-content: center;

  .item-image {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin: 5px;
    overflow: hidden;

    img {
      height: 60px;
      width: 60px;
    }
  }
  .item-info {
    .item-title {
      display: flex;
      flex: 1;
      font-size: 1.4rem;
      font-weight: 600;
      margin-left: 4px;
    }

    .item-sub-title {
      span {
        font-size: 0.8rem;
        font-weight: 300;
        margin: 5px;
      }
    }
  }
}
</style>
